<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
			
	<style>
			.rich-table-firstrow  .rich-table-cell{
			  border-top-width:0px;
			}
	</style>

	<a4j:form id="form1"
		reRender="list-body" ajaxSubmit="true" ignoreDupResponses="true"
		requestDelay="500">

		<a4j:region id="stat1">

			<a4j:outputPanel id="slider-body">

				<rich:dataFilterSlider sliderListener="#{dfsBean.doSlide}"
					binding="#{inventoryList.dataFilterSlider}" for="carList"
					forValRef="inventoryList.carInventory" filterBy="getMileage"
					manualInput="true" onSlide="true" onChange="true"
					storeResults="true" trackStyleClass="track" width="200px"
					styleClass="slider-container" startRange="10000" endRange="60000"
					increment="10000" rangeStyleClass="range" trailer="true"
					trailerStyleClass="trailer" handleStyleClass="handle"
					handleValue="1" id="slider_1"></rich:dataFilterSlider>

			</a4j:outputPanel>

			<rich:spacer height="15" />

			<a4j:outputPanel id="list-body">
				<h:dataTable id="carIndex" rows="10"
					binding="#{inventoryList.carMakeIndexUIData}"
					value="#{inventoryList.carMakeIndex}" var="category"
					styleClass="list-table1" columnClasses="column-index"
					rowClasses="list-row3">

					<h:column>
						<a4j:commandLink actionListener="#{inventoryList.filterCarList}"
							reRender="carList">
							<h:outputText value="#{category}" />
							<f:attribute name="filterRule" value="showTable" />

						</a4j:commandLink>
					</h:column>

				</h:dataTable>
				<rich:spacer height="15" />

				<rich:dataTable width="300" id="carList" rows="10"
					value="#{inventoryList.carInventory}" var="category">
					<f:facet name="header">
						<rich:columnGroup>
							<h:column>
								<h:outputText styleClass="headerText" value="Make" />
							</h:column>
							<h:column>
								<h:outputText styleClass="headerText" value="Model" />
							</h:column>
							<h:column>
								<h:outputText styleClass="headerText" value="Price" />
							</h:column>
							<h:column>
								<h:outputText styleClass="headerText" value="Mileage" />
							</h:column>
						</rich:columnGroup>
					</f:facet>

					<h:column>
						<h:outputText value="#{category.make}" />
					</h:column>
					<h:column>
						<h:outputText value="#{category.model}" />
					</h:column>
					<h:column>
						<h:outputText value="#{category.price}" />
					</h:column>
					<h:column>
						<h:outputText value="#{category.mileage}" />
					</h:column>

				</rich:dataTable>

			</a4j:outputPanel>

			<rich:spacer height="15" />


		</a4j:region>

	</a4j:form>

</ui:composition>